<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="taglib.jsp" %>
<c:set var="bluenile" value="${res}bluenile/"/>
<c:set var="bsgrid" value="${res}bsgrid/"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript">var ctx = '${ctx}';</script>
    <link rel="stylesheet" type="text/css" href="${bluenile}lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${bluenile}stylesheets/theme.css">
    <link rel="stylesheet" href="${bluenile}lib/font-awesome/css/font-awesome.css">
    <script src="${bluenile}lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
		<script type="text/javascript" src="${bluenile}lib/bootstrap/js/respond.min.js"></script>
	<![endif]-->
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="${bluenile}lib/html5.js"></script>
    <![endif]-->
    
    <script src="${res}js/common.js" type="text/javascript"></script>
    <!-- datepicker -->
    <script src="${res}My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <!-- validate -->
	<script src="${res}jqueryValidate/jquery.validate.min.js" type="text/javascript"></script>
	<script src="${res}jqueryValidate/localization/messages_zh.min.js" type="text/javascript"></script>
    <!-- dialog -->
	<link rel="stylesheet" href="${res}artDialog/css/ui-dialog.css">
	<script src="${res}artDialog/dist/dialog-plus-min.js"></script>
	<!-- bsgrid -->
	<link rel="stylesheet" href="${bsgrid}merged/bsgrid.all.min.css"/>
    <script type="text/javascript" src="${bsgrid}js/lang/grid.zh-CN.min.js"></script>
    <script type="text/javascript" src="${bsgrid}merged/bsgrid.all.min.js"></script>
  </head>

  <!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie ie7 "> <![endif]-->
  <!--[if IE 8 ]> <body class="ie ie8 "> <![endif]-->
  <!--[if IE 9 ]> <body class="ie ie9 "> <![endif]-->
  <!--[if (gt IE 9)|!(IE)]><!--> 
  <body class=""> 
  <!--<![endif]-->
    <div class="navbar">
        <div class="navbar-inner">
                <ul class="nav pull-right">
                    <li><a href="${ctx}index.jsp" class="hidden-phone visible-tablet visible-desktop">设置</a></li>
                    <li id="fat-menu" class="dropdown">
                        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-user"></i> admin
                            <i class="icon-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">我的账号</a></li>
                            <li class="divider"></li>
                            <li><a href="login.jsp">退出</a></li>
                        </ul>
                    </li>
                </ul>
                <a class="brand" href="#"><span class="first">后台管理</span></a>
        </div>
    </div>
    
    <div class="sidebar-nav">
        <a href="#dashboard-menu" class="nav-header" data-toggle="collapse"><i class="icon-dashboard"></i>基础管理</a>
        <ul id="dashboard-menu" class="nav nav-list collapse in">
            <li class="active"><a href="orderInfo_bootstrap_ajax.jsp">订单管理</a></li>
            
        </ul>
    </div>
    
    <div class="content">
        <div class="header">
            <span class="page-title">订单管理</span>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
				<div style="padding-top: 20px;">
				<!-- content here -->
	<form id="schFrm" class="form-inline" onsubmit="return false;">
		订单号:<input name="orderIdSch" type="text" value="">
		手机号:<input name="mobileSch" type="text" value="">
		地址:<input name="addressSch" type="text" value="">
		<button id="schBtn" class="btn"><i class="icon-search"></i>查询</button>
		<input type="reset" class="btn" value="清空">
	</form>
	<hr>
	<div class="btn-toolbar">
	    <button id="addBtn" class="btn btn-primary"><i class="icon-plus"></i> 新增订单</button>
	  <div class="btn-group">
	  </div>
	</div>
	<table id="searchTable">
        <tr>
            <th w_index="orderId" w_sort="order_id,desc" width="6%;">订单号</th>
            <th w_index="cityName" width="5%;">城市名</th>
            <th w_index="mobile" w_align="left" width="15%;">手机号</th>
            <th w_index="address" w_align="left" width="30%;">地址</th>
            <th w_index="createDate" w_sort="create_date" width="15%;">下单时间</th>
            <th w_render="operate" width="10%;">操作</th>
        </tr>
    </table>
    
    <div id="crudWin">
    	<form id="crudFrm">
			<table>
				<caption id="frm_msg"></caption>
				<tr>
					<td>城市:</td>
					<td><input name="cityName" type="text" class="required" /></td>
				</tr>
				<tr>
					<td>手机号:</td>
					<td><input name="mobile" type="text" class="required"/></td>
				</tr>
				<tr>
					<td>地址:</td>
					<td><input name="address" type="text"/></td>
				</tr>
				<tr>
					<td>创建时间:</td>
					<td><input name="createDate" type="text" onClick="WdatePicker()"  class="required"/></td>
				</tr>
			</table>
		</form>
    </div>
    
    <script type="text/javascript">
        var that = this;
        
        var pk = 'orderId'; // java类中的主键字段
    	var listUrl = ctx + 'listBsgridOrderInfo.do'; // 查询
    	var addUrl = ctx + 'addBsgridOrderInfo.do'; // 添加
    	var updateUrl = ctx + 'updateBsgridOrderInfo.do'; // 修改
    	var delUrl = ctx + 'delBsgridOrderInfo.do'; // 删除
    	var submitUrl = ''; // 提交URL

    	var gridObj; // 表格
    	var crudWin; // 窗口
    	var $schFrm = $('#schFrm'); // 查询表单
    	var $crudFrm = $('#crudFrm'); // 编辑表单

    	var $schBtn = $('#schBtn'); // 查询按钮
    	var $addBtn = $('#addBtn'); // 添加按钮
    	
    	var validator; // 验证器
    	
    	function reset() {
    		$crudFrm.get(0).reset();
    		validator.resetForm();
    	}
    	
    	
    	// 初始化事件
    	$addBtn.click(function() {
    		reset();
    		crudWin.title('添加');
    		crudWin.show();
    		submitUrl = addUrl;
    	});
    	
    	$schBtn.click(function() {
    		search();
    	});
    	
        gridObj = $.fn.bsgrid.init('searchTable', {
            url: listUrl
            ,pageSizeSelect: true
            ,stripeRows: true
            ,rowHoverColor: true
            ,rowSelectedColor: false
            ,pageSize: 10
        });
    	
        crudWin = dialog({
    	    title: '编辑',
    	    width:380,
    	    content: document.getElementById('crudWin'),
    	    okValue: '保存',
    	    ok: function () {
    	    	that.save();
    	    	return false;
    	    },
    	    cancelValue: '取消',
    	    cancel: function () {
    	    	this.close();
    	    	return false;
    	    }
    	});
    	
        function search(){
        	gridObj.options.otherParames = getFormData($schFrm);
        	gridObj.gotoPage(1);
    	}

        function operate(row, rowIndex, colIndex, options) {
        	return '<a href="#" onclick="'
				+ FunUtil.createFun(that, 'edit', row)
				+ ' return false;">修改</a>'
				+ '&nbsp;&nbsp;'
				+ '<a href="#" onclick="'
				+ FunUtil.createFun(that, 'del', row)
				+ ' return false;">删除</a>';
        }
        
		// 保存
    	this.save = function() {
    		var self = this;
    		var data = getFormData($crudFrm);
    		var validateVal = validator.form();
    		if(validateVal) {
	    		Action.post(submitUrl, data, function(result) {
					Action.execResult(result, function(result) {
						gridObj.refreshPage();
						crudWin.close();
					});
				});
    		}
    	}
    	 // 编辑
    	this.edit = function(row) {
    		if (row) {
    			reset();
    			crudWin.title('修改');
    			loadFormData($crudFrm,row);
    			submitUrl = updateUrl + '?' + pk + '=' + row[pk];
    			crudWin.show();
    		}
    	}
     
    	// 删除
    	this.del = function(row) {
    		if (row) {
    			var d = dialog({
    	    	    title: '提示',
    	    	    width: 200,
    	    	    content: '确定要删除改记录吗?',
    	    	    okValue: '确定',
    	    	    ok: function () {
    	    	    	Action.post(delUrl, row, function(result) {
    						Action.execResult(result, function(result) {
    							gridObj.refreshPage();
    						});
    					});
    	    	    },
    	    	    cancelValue: '取消',
    	    	    cancel: function () {}
    	    	});
    	    	d.showModal();
    		}
    	}
        
    	validator = $crudFrm.validate();
    </script>
				 <footer>
				     <hr>
				     <p>&copy; 2016</p>
				 </footer>
				 </div>
            </div>
        </div>
    </div>

    <script src="${bluenile}lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
